<template>
  <header class="head">
      <div class="head-right">
          <ManufactSelect @change="changeSelect"/>
          <div class="head-input">
            <div class="head-label">直播流ID：</div>
            <el-input @keyup.enter="searchTable" @clear="searchTable" clearable v-model="search.StreamID" placeholder="请输入关键字搜索">
                <template #append>
                    <el-button icon="el-icon-search" @click="searchTable"></el-button>
                </template>
            </el-input>
          </div>
      </div>
      <el-button type="primary" @click="goEdit">创建直播</el-button>
  </header>
  <section>
    <ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
        <template  #index="scope" >
            <span>{{scope.soltval.id}}</span>
        </template>
        <template  #StreamStatus="scope" >
            <span>{{$utils.liveStatus(scope.soltval.StreamStatus)}}</span>
        </template>
        <template  #all="scope" >
          <span @click="goEdit(scope.soltval)" class="link">查看详情</span>
        </template>
    </ele-table>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, ref,onMounted, getCurrentInstance, onActivated } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import ManufactSelect from '@/components/manufact-select/index.vue';
import { useRouter } from "vue-router"

export default defineComponent({
  name: 'Live',
  components:{
    eleTable,
    ManufactSelect
},
setup(){
  const instance: any = getCurrentInstance();
  const GL = instance.appContext.config.globalProperties;
  const router = useRouter()
  const search = reactive({
    ServiceID: '',
    StreamID:'',
  })
  const loading = ref(true);
  const pageObj = ref({page:1,size:10,total:0})
  const tableTitleData: any = ref([
    { label: '厂商ID',  sortable: true , prop: 'ServiceID'},
    { label: '直播流ID', sortable: true, prop: 'StreamID' },
    { label: '接入码',  sortable: true ,prop: 'StreamCode'},
    { label: '总观看人数',align:'center', prop: 'AllVisitor' },
    { label: '最大观看人数',align:'center', prop: 'MaxVisitor' },
    { label: '流状态',align:'center', slotname: 'StreamStatus' },
    { label: '操作',align:'center', slotname: 'all' }
  ])
  const tableData = ref([])
  const changePage = (val) =>{
    pageObj.value.page = val;
    initData()
  };
  const changeSelect = (val) => {
    search.ServiceID = val ? val.ServiceID : ''
    searchTable()
  }
  const searchTable = () => {
    initSearch()
    initData()
  };
  const goEdit = (e) => {
    if(e.StreamID) {
      router.push({
        path: '/live-detail',
        query: {StreamID: e.StreamID, ServiceID:e.ServiceID}
      })
    } else {
      router.push({
        path: '/live-create',
      })
    }
  }
  const initData = () => {
    loading.value = true;
    GL.$axios.get(GL.$api.video.QueryStreamList, {params: {StreamID: search.StreamID, ServiceID : search.ServiceID, PageIndex:pageObj.value.page - 1, PageSize:pageObj.value.size}})
      .then((res: any) => {
        if(res.Code === 0) {
          loading.value = false;
          tableData.value = res.Streams;
          pageObj.value.total = res.StreamTotal;
        }
      })
      .catch((err: any) => {
          tableData.value = []
          loading.value = false;
      });
  }
  const initSearch = () => {
    pageObj.value.page = 1
    pageObj.value.size = 10
  }
  onActivated(()=>{
    searchTable()
  })
  return{
    search,
    loading,
    pageObj,
    tableTitleData,
    tableData,
    searchTable,
    changePage,
    goEdit,
    changeSelect
  }
}
})
</script>

<style lang="scss" scoped>
.head{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .head-right{
        display: flex;
        justify-content: space-around;
        .head-input{
            margin-left: 20px;
            display: flex;
            align-items: center;
            .head-label{
              display: inline-block;
              width: 120px;
            }
        } 
    }
    
}
.link{
    color: #409eff;
    cursor: pointer;
    margin: 0 10px;
}
</style>
